<!-- 轮播图列表 -->
<template>
   <el-button style="margin-bottom: 30px;" @click="dialogVisible = true">
      添加轮播图
   </el-button>
   <el-table :data="imagesData.slice(index, index + pagesize)" border style="width: 100%" height="100%">
      <el-table-column prop="alt" label="序号" />
      <el-table-column prop="img" label="图片">
         <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="contain" />
         </template>
      </el-table-column>
      <el-table-column prop="state" label="提示信息" />
      <el-table-column prop="link" label="链接地址" />
      <el-table-column prop="bannerid" label="操作">
         <template #default="scope">
            <div>
               <el-icon @click="removeImage(scope.row.bannerid)" style="cursor: pointer;">
                  <Delete />
               </el-icon>
            </div>
         </template>
      </el-table-column>
   </el-table>
   <el-pagination class="pager" background layout="prev, pager, next" :total="imagesData.length" :page-size="pagesize"
      @current-change="currentChange" />
   <el-dialog v-model="dialogVisible" title="添加轮播图">
      <AddBanner @add-succuss="addSuccess"></AddBanner>
   </el-dialog>
</template>
<script setup>

import { ref } from 'vue';
import { banner_image, delete_image } from '../../../../services/index';
import { ElMessage } from 'element-plus';
import AddBanner from './AddBanner.vue';

let imagesData = ref([]);
let index = ref(0);
let pagesize = ref(3);
const dialogVisible = ref(false);
banner_image().then(request => {
   imagesData.value = request.data.data;
   console.log(imagesData.value);
})
const currentChange = page => {
   index.value = (page - 1) * pagesize.value
}
function removeImage(bannerid) {
   delete_image(bannerid).then((request) => {
      console.log(request);
      banner_image().then(request => {
         console.log(request, 1);
         imagesData.value = request.data.data;
         ElMessage.success('删除成功')
      })
   })
}
function addSuccess() {
   dialogVisible.value = false;
   banner_image().then(request => {
      imagesData.value = request.data.data;
   })
}
</script>
<style scoped>

</style>